<template>
  <div class=" bg-red-200  min-h-screen  ">



    <div class="flex items-center justify-center">
      <div class=" max-w-xl   relative">
        relative ==> 相对父容器
        <div class="h-26  flex    justify-between   relative  ">
          <button  @click="isOpen = !isOpen"    class="bg-red-300  p-3 ">show Modal</button>
        </div>
        <!--    -->
        <transition
            enter-active-class="transition-all transition-fastest ease-out-quad"
            leave-active-class="transition-all transition-faster ease-in-quad"
            enter-class="opacity-0 scale-70"
            enter-to-class="opacity-100 scale-100"
            leave-class="opacity-100 scale-100"
            leave-to-class="opacity-0 scale-70"         >
          <main      v-if="isOpen === true"     class="       fixed inset-0 flex items-center justify-center             "   @close="isOpen = false">
            <div    @click="isOpen = false"      class="    bg-black  opacity-50   fixed inset-0 flex items-center justify-center         text-red   ">345903459523040392</div>
            <div class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6     z-30      ">
              <h2 class="font-semibold text-gray-900 text-2xl leading-tight border-b-2 border-gray-200 pb-4">Delete account</h2>
              <p class="mt-4 text-gray-700">  cannot be undone.</p>
              <div class="mt-6">
                <button   @click="isOpen = false"   class="ml-4 px-4 py-2 text-gray-800  bg-red-300   hover:bg-gray-100 border rounded focus:outline-none focus:shadow-outline">
                  Cancel
                </button>
              </div>
            </div>
          </main>
        </transition>
        <!--    -->
        <div class="font-bold text-red-600  ">asfdapore tematutio eius est explicabo facilis fuga impedit in iusto magnam modi officia, omnis qui ratione repellat sapiente suscipit tempore.     </div>
        <!--    -->
      </div>
    </div>
    需配置 data:





  </div>
</template>

<script>
export default {
  name: "Testtt",
  created() {
    document.title = "TEST"
  },
  data() {
    return {
      isOpen:true
    }
  },
  methods: {
    prevOrNext(n){
      this.currentPage += n
      if (this.currentPage > this.totalPages-1){  this.currentPage = this.totalPages  }
      if (this.currentPage < 1) {  this.currentPage = 1  }
    },
    select(n){
      if (n === this.currentPage) return
      if (typeof n === 'string') return
      this.currentPage = n
    }
  },
  computed: {
    pages() {
      const c = this.currentPage
      const t = this.totalPages
      if (c <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]  //第一种情况
      } else if (c >= t - 4) {
        return [1, '...', t - 8, t - 7, t - 6, t - 5, t - 4, t - 3, t - 2, t - 1, t] //第二种情况
      } else {
        return [1, '...', c - 3, c - 2, c - 1, c, c + 1, c + 2, c + 3, '...', t]  //第三种情况
      }
    }
  }

}
</script>

<style scoped>

</style>
